<template>
  <div class="publicpageview">
    <div class="publicformview">
      <el-form :inline="true" :model="listQuery" size="mini" ref="searchForm">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="区房屋管理单位：" prop="unitAdmin">
              <CompanySelect v-model="listQuery.unitAdmin" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="管理部(分中心)：" prop="houseAdminId">
              <DeptBrowser v-model="listQuery.houseAdminId" :queryDistrictId="listQuery.districtId" />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所号：" prop="blockId">
              <BlockBrowser v-model="listQuery.blockId" />
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="来源：" prop="source">
              <el-input v-model="listQuery.source" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">



          <el-col :span="24" style="text-align: right;">
            <div>
              <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
              <el-button size="mini" @click="resetForm('searchForm')">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="publitableview">
      <el-button type="primary" size="mini" @click="handleAddIssue">问题跟踪录入</el-button>
      <el-button type="success" size="mini" @click="handleBatchImport">批量导入</el-button>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row size="mini">
        <el-table-column align="center" label="序号" type="index" width="60">
        </el-table-column>

        <el-table-column align="center" label="所号" prop="blockName" width="100">
        </el-table-column>

        <el-table-column align="center" label="巡查类型" prop="inspectionType" width="120">
          <template slot-scope="scope">
            {{ getDictName('inspectionTypeDict', scope.row.inspectionType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="问题类型" prop="questionType" width="120">
          <template slot-scope="scope">
            {{ getDictName('questionTypeDict', scope.row.questionType) }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="来源" prop="source" width="120">
        </el-table-column>

        <el-table-column align="center" label="巡查时间" prop="patrolTime" width="120">
          <template slot-scope="scope">
            {{ formatDate(scope.row.patrolTime) }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="问题位置" prop="problemLocation" min-width="150">
        </el-table-column>

        <el-table-column align="center" label="处理进度" prop="dealProgress" width="100">
          <template slot-scope="scope">
            <el-tag
              :type="scope.row.dealProgress == '0' ? 'danger' : scope.row.dealProgress == '50' ? 'warning' : 'success'"
              size="small">
              {{ getDictName('dealProgressDict', scope.row.dealProgress) }}
            </el-tag>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleViewAttachments(scope.row)">查看附件</el-button>
            <el-button type="text" size="mini" @click="handleUpdate(scope.row)">修改</el-button>
            <el-button type="text" size="mini" @click="handleView(scope.row)">详情</el-button>
            <el-button type="text" size="mini" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="publicpaginationview">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageNum" background :page-sizes="[10, 20, 50, 100]" :page-size="listQuery.pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="total" small> </el-pagination>
      </div>
    </div>

    <!-- 问题跟踪弹窗 -->
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1000px" @close="handleDialogClose">
      <el-form :model="formData" :rules="formRules" ref="issueForm" label-width="120px" size="small">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="所号：" prop="blockId">
              <BlockBrowser v-model="formData.blockId" :display-label.sync="formData.blockName" :disabled="isReadonly"
                @change="handleBlockChange" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡查类型：" prop="inspectionType">
              <el-select v-model="formData.inspectionType" :disabled="isReadonly" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in dictData.inspectionTypeDict" :key="item.id" :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="巡查时间：" prop="patrolTime">
              <el-date-picker v-model="formData.patrolTime" :disabled="isReadonly" type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" style="width: 100%">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="问题类型：" prop="questionType">
              <el-select v-model="formData.questionType" :disabled="isReadonly" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in dictData.questionTypeDict" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题位置：" prop="problemLocation">
              <el-input v-model="formData.problemLocation" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题描述：" prop="problemDescription">
              <el-input v-model="formData.problemDescription" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="来源：" prop="source">
              <el-input v-model="formData.source" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="房屋结构：" prop="houseStructure">
              <el-input v-model="formData.houseStructure" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：" prop="note">
              <el-input v-model="formData.note" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="文件：" prop="url">
              <DocumentUpload v-model="formData.url" :show-tips="true" :disabled="isReadonly" />
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 整改方案 -->
        <div class="section-title">整改方案</div>

        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="处理进度：" prop="dealProgress">
              <el-select v-model="formData.dealProgress" :disabled="isReadonly" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in dictData.dealProgressDict" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="问题处理意见：" prop="dealOpinion">
              <el-input v-model="formData.dealOpinion" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="备注：" prop="dealNote">
              <el-input v-model="formData.dealNote" :disabled="isReadonly" placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="处理文件：" prop="dealUrl">
              <DocumentUpload v-model="formData.dealUrl" :show-tips="true" :disabled="isReadonly" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{ isReadonly ? '关 闭' : '取 消' }}</el-button>
        <el-button v-if="!isReadonly" type="primary" @click="handleSubmit" :loading="submitLoading">保 存</el-button>
      </div>
    </el-dialog>

    <!-- 查看附件弹窗 -->
    <el-dialog title="查看附件" :visible.sync="attachmentDialogVisible" width="800px" @close="handleAttachmentDialogClose">
      <div class="attachment-view">
        <div v-for="(file, index) in currentAttachments" :key="index" class="attachment-item">
          <div class="file-icon" :class="getFileIconClass(file.type)">
            <div v-if="file.type === 'pdf'" class="pdf-lines">
              <span></span>
            </div>
            <div v-else-if="file.type === 'word'" class="word-icon">W</div>
            <div v-else-if="file.type === 'excel'" class="excel-icon">E</div>
            <div v-else class="default-icon">文</div>
            <div class="file-text">{{ getFileTypeText(file.type) }}</div>
          </div>
          <div class="file-name">{{ file.name }}</div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="attachmentDialogVisible = false">返回</el-button>
      </div>
    </el-dialog>

    <!-- 批量导入弹窗 -->
    <el-dialog title="上传文件" :visible.sync="uploadDialogVisible" width="900px" @close="handleUploadDialogClose">
      <div class="upload-container">
        <el-upload class="upload-dragger" drag :action="uploadAction" :file-list="fileList"
          :on-success="handleUploadSuccess" :on-error="handleUploadError" :on-change="handleFileChange"
          :before-upload="beforeUpload" :auto-upload="false" ref="upload">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            请将文件拖动到此处，或<em>点击上传</em>
          </div>
        </el-upload>

        <div class="template-download">
          下载模板：<el-button type="text" @click="downloadTemplate">隐患跟踪处置模板</el-button>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="uploadDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleImport" :loading="importLoading">导 入</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script>
import { getSurveyTaskList, addSurveyTask, updateSurveyTask, getSurveyTaskDetail, deleteSurveyTask } from '@/api/safe/fangwuanquankancha/yinhuangenzongchuzhi'
import { formatDate } from '@/utils/dateUtils'
import { convertObjectIntegersToStrings } from '@/utils/dataUtils'
import CompanySelect from "@/components/commonSelect/companySelect.vue"
import DeptBrowser from "@/components/SysBrowser/DeptBrowser.vue"
import BlockBrowser from "@/components/SysBrowser/BlockBrowser.vue"
import DocumentUpload from "@/components/DocumentUpload.vue"

export default {
  name: 'YinhuanGenzongChuzhi',
  components: {
    CompanySelect,
    DeptBrowser,
    BlockBrowser,
    DocumentUpload
  },

  data() {
    return {
      // 字典数据
      dictData: {
        // 任务类型字典
        taskTypeDict: [
          { id: '1', name: '定期巡查' },
          { id: '2', name: '专项巡查' },
          { id: '3', name: '应急巡查' }
        ],
        // 问题类型字典
        questionTypeDict: [
          { id: '1', name: '结构安全' },
          { id: '2', name: '消防安全' },
          { id: '3', name: '设施维护' },
          { id: '4', name: '环境卫生' }
        ],
        // 安全巡查任务类型字典
        inspectionTypeDict: [
          { id: '1', name: '上门检查' },
          { id: '2', name: '电话检查' },
          { id: '3', name: '书面检查' },
          { id: '4', name: '综合检查' }
        ],
        // 处理进度字典
        dealProgressDict: [
          { id: '0', name: '未处理' },
          { id: '50', name: '处理中' },
          { id: '100', name: '已处理' }
        ]
      },
      listQuery: {
        pageNum: 1,
        pageSize: 20,
        taskType: "",
        blockId: "",
        source: "",
        taskName: "",
        unitAdmin: "",
        houseAdminId: ""
      },
      total: 0,
      list: [],
      listLoading: false,
      dialogVisible: false,
      attachmentDialogVisible: false,
      uploadDialogVisible: false,
      submitLoading: false,
      importLoading: false,
      dialogTitle: "新增问题跟踪",
      isReadonly: false,
      currentEditId: null,
      currentAttachments: [],
      uploadAction: "/api/upload",
      fileList: [],
      formData: {
        blockId: "",
        blockName: "",
        inspectionType: "",
        patrolTime: "",
        questionType: "",
        problemLocation: "",
        problemDescription: "",
        source: "",
        houseStructure: "",
        note: "",
        url: [],
        dealProgress: "",
        dealOpinion: "",
        dealNote: "",
        dealUrl: [],
        taskId: "",
        taskType: ""
      },
      formRules: {
        blockId: [
          { required: true, message: '请选择所号', trigger: 'blur' }
        ],
        inspectionType: [
          { required: true, message: '请选择巡查类型', trigger: 'change' }
        ],
        patrolTime: [
          { required: true, message: '请选择巡查时间', trigger: 'change' }
        ],
        questionType: [
          { required: true, message: '请选择问题类型', trigger: 'change' }
        ],
        problemLocation: [
          { required: true, message: '请输入问题位置', trigger: 'blur' }
        ],
        problemDescription: [
          { required: true, message: '请输入问题描述', trigger: 'blur' }
        ],
        source: [
          { required: true, message: '请输入来源', trigger: 'blur' }
        ]
      }
    };
  },

  mounted() {
    this.getList();
  },

  methods: {
    // 通用字典名称查找方法
    getDictName(dictType, id) {
      if (!id && id !== 0) return '';
      const item = this.dictData[dictType].find(item => item.id == String(id));
      return item ? item.name : id;
    },

    // 分页大小改变
    handleSizeChange(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    // 当前页改变
    handleCurrentChange(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    // 获取列表数据
    getList() {
      this.listLoading = true;

      // 构建请求参数，过滤空值
      const params = {};
      Object.keys(this.listQuery).forEach(key => {
        if (this.listQuery[key] !== '') {
          params[key] = this.listQuery[key];
        }
      });

      // 添加固定条件 taskType=1
      params.taskType = '1';

      // 调用隐患跟踪处置分页接口
      getSurveyTaskList(params)
        .then(response => {
          this.listLoading = false;
          if (response.code == 200) {
            // 使用dataUtils转换整数为字符串
            this.list = convertObjectIntegersToStrings(response.data.list || []);
            this.total = response.data.total || 0;
          } else {
            this.$message.error(response.message || '获取数据失败');
          }
        })
        .catch(error => {
          this.listLoading = false;
          console.error('获取隐患跟踪处置数据失败:', error);
          this.$message.error('获取数据失败，请检查网络连接');
        });
    },
    // 搜索
    handleSearch() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.getList();
    },

    // 新增问题跟踪
    handleAddIssue() {
      this.dialogTitle = "新增问题跟踪";
      this.isReadonly = false;
      this.currentEditId = null;
      this.dialogVisible = true;
      this.resetFormData();
    },
    // 批量导入
    handleBatchImport() {
      this.uploadDialogVisible = true;
      this.fileList = [];
    },
    // 上传弹窗关闭
    handleUploadDialogClose() {
      this.fileList = [];
      this.$refs.upload.clearFiles();
    },
    // 下载模板
    downloadTemplate() {
      // 模拟下载模板
      this.$message.success('模板下载中...');
      // 这里应该实现实际的模板下载逻辑
    },
    // 上传前验证
    beforeUpload(file) {
      const isExcel = file.type === 'application/vnd.ms-excel' ||
        file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
      if (!isExcel) {
        this.$message.error('只能上传 Excel 文件！');
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 2MB!');
        return false;
      }

      return true;
    },
    // 文件选择变化
    handleFileChange(file, fileList) {
      this.fileList = fileList;
    },
    // 上传成功
    handleUploadSuccess(response, file) {
      this.$message.success('文件上传成功');
    },
    // 上传失败
    handleUploadError(err, file) {
      this.$message.error('文件上传失败');
    },
    // 导入数据
    handleImport() {
      if (this.fileList.length === 0) {
        this.$message.warning('请先选择要导入的文件');
        return;
      }

      this.importLoading = true;
      // 模拟导入过程
      setTimeout(() => {
        this.importLoading = false;
        this.uploadDialogVisible = false;
        this.$message.success('导入成功！');
        this.getList(); // 刷新列表
      }, 2000);
    },
    // 弹窗关闭
    handleDialogClose() {
      this.resetFormData();
      this.$refs.issueForm.resetFields();
    },
    // 重置表单数据
    resetFormData() {
      this.formData = {
        blockId: "",
        blockName: "",
        inspectionType: "",
        patrolTime: "",
        questionType: "",
        problemLocation: "",
        problemDescription: "",
        source: "",
        houseStructure: "",
        note: "",
        url: [],
        dealProgress: "",
        dealOpinion: "",
        dealNote: "",
        dealUrl: [],
        taskId: "",
        taskType: "1" // 固定值
      };
    },
    // 表单提交
    handleSubmit() {
      this.$refs.issueForm.validate((valid) => {
        if (valid) {
          this.submitLoading = true;

          // 深拷贝表单数据
          const submitData = { ...this.formData };

          // 添加固定条件 taskType=1
          submitData.taskType = '1';

          // 新增时不传id
          if (!this.currentEditId) {
            delete submitData.id;
          }

          // 使用日期格式化工具处理日期
          if (submitData.patrolTime) {
            submitData.patrolTime = formatDate(submitData.patrolTime);
          }

          // 处理文件上传字段 - 将DocumentUpload组件的数据转换为JSON字符串存储
          if (submitData.url && Array.isArray(submitData.url)) {
            submitData.url = JSON.stringify(submitData.url);
          }
          if (submitData.dealUrl && Array.isArray(submitData.dealUrl)) {
            submitData.dealUrl = JSON.stringify(submitData.dealUrl);
          }

          // 根据是否有ID决定使用新增还是修改接口
          const apiCall = this.currentEditId ? updateSurveyTask(submitData) : addSurveyTask(submitData);

          apiCall
            .then(response => {
              this.submitLoading = false;
              if (response.code == 200) {
                this.dialogVisible = false;
                const action = this.currentEditId ? '修改' : '新增';
                this.$message.success(`${action}成功！`);
                this.getList(); // 刷新列表
              } else {
                this.$message.error(response.message || '操作失败');
              }
            })
            .catch(error => {
              this.submitLoading = false;
              console.error('保存隐患跟踪处置失败:', error);
              this.$message.error('操作失败，请检查网络连接');
            });
        } else {
          this.$message.error('请填写完整信息');
          return false;
        }
      });
    },
    // 查看详情
    handleView(row) {
      this.dialogTitle = "查看问题跟踪详情";
      this.isReadonly = true;
      this.currentEditId = row.id;
      this.getDetailData(row.id);
      this.dialogVisible = true;
    },
    // 修改记录
    handleUpdate(row) {
      this.dialogTitle = "修改问题跟踪";
      this.isReadonly = false;
      this.currentEditId = row.id;
      this.getDetailData(row.id);
      this.dialogVisible = true;
    },
    // 获取详情数据
    getDetailData(id) {
      getSurveyTaskDetail(id)
        .then(response => {
          if (response.code == 200 && response.data) {
            // 使用dataUtils转换整数为字符串
            this.formData = convertObjectIntegersToStrings(response.data);

            // 删除创建时间字段
            delete this.formData.createTime;

            // 处理文件字段 - 将JSON字符串转换为DocumentUpload组件需要的数组格式
            if (this.formData.url && typeof this.formData.url === 'string') {
              try {
                this.formData.url = JSON.parse(this.formData.url);
              } catch (e) {
                console.warn('url字段JSON解析失败:', e);
                this.formData.url = [];
              }
            } else {
              this.formData.url = this.formData.url || [];
            }

            if (this.formData.dealUrl && typeof this.formData.dealUrl === 'string') {
              try {
                this.formData.dealUrl = JSON.parse(this.formData.dealUrl);
              } catch (e) {
                console.warn('dealUrl字段JSON解析失败:', e);
                this.formData.dealUrl = [];
              }
            } else {
              this.formData.dealUrl = this.formData.dealUrl || [];
            }
          } else {
            this.$message.error(response.message || '获取详情失败');
          }
        })
        .catch(error => {
          console.error('获取隐患跟踪详情失败:', error);
          this.$message.error('获取详情失败，请检查网络连接');
        });
    },
    // 查看附件
    handleViewAttachments(row) {
      this.currentAttachments = row.attachments || [];
      this.attachmentDialogVisible = true;
    },
    // 附件弹窗关闭
    handleAttachmentDialogClose() {
      this.attachmentDialogVisible = false;
      this.currentAttachments = [];
    },
    // 获取文件图标类名
    getFileIconClass(type) {
      const classMap = {
        'pdf': 'file-pdf',
        'word': 'file-word',
        'excel': 'file-excel',
        'image': 'file-image',
        'default': 'file-default'
      };
      return classMap[type] || classMap['default'];
    },
    // 获取文件类型文本
    getFileTypeText(type) {
      const textMap = {
        'pdf': 'PDF',
        'word': 'DOC',
        'excel': 'XLS',
        'image': 'IMG',
        'default': '文件'
      };
      return textMap[type] || textMap['default'];
    },
    // 删除记录
    handleDelete(id) {
      this.$confirm('此操作将删除该条内容，请确认是否继续操作？', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 调用删除接口
        deleteSurveyTask(id)
          .then(response => {
            if (response.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getList(); // 刷新列表
            } else {
              this.$message.error(response.message || '删除失败');
            }
          })
          .catch(error => {
            console.error('删除隐患跟踪失败:', error);
            this.$message.error('删除失败，请检查网络连接');
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },

    // 所号选择变化事件
    handleBlockChange(blockData) {
      if (blockData) {
        // 可以在这里处理所号选择后的其他逻辑
        console.log('选择的所号信息:', blockData);
      }
    },

    // 问题文件变化事件
    handleFileChange(fileList) {
      console.log('问题文件变化:', fileList);
    },



    // 格式化日期 - 使用工具类方法
    formatDate
  }
};
</script>

<style scoped>
/* 页面样式继承公共样式类 publicpageview, publicformview, publitableview */

/* 上传组件标准样式 */
.upload-container {
  padding: 20px 0;
  width: 100%;
}

.upload-dragger {
  width: 100% !important;
}

.upload-dragger .el-upload {
  width: 100% !important;
}

.upload-dragger .el-upload-dragger {
  width: 100% !important;
  height: 200px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background-color: #fafafa;
  box-sizing: border-box;
}

.upload-dragger .el-upload-dragger:hover {
  border-color: #409EFF;
  width: 100%;
}

.upload-dragger .el-upload-dragger .el-icon-upload {
  font-size: 67px;
  color: #C0C4CC;
  margin: 40px 0 16px;
  line-height: 50px;
  width: 100%;
}

.upload-dragger .el-upload__text {
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.upload-dragger .el-upload__text em {
  color: #409EFF;
  font-style: normal;
}

.template-download {
  margin-top: 15px;
  font-size: 14px;
  color: #606266;
}

.template-download .el-button--text {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
}

::v-deep .el-upload {
  width: 100% !important;
}

::v-deep .el-upload-dragger {
  width: 100% !important;
}

/* 附件查看弹窗样式 */
.attachment-view {
  padding: 20px;
  min-height: 200px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 24px;
  justify-items: center;
}

.attachment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 120px;
}

.file-icon {
  width: 80px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s;
}

.file-icon:hover {
  transform: scale(1.05);
}

/* PDF文件样式 */
.file-pdf {
  background: #EF4A37;
}

.pdf-lines {
  width: 48px;
  height: 36px;
  position: relative;
  margin-bottom: 8px;
}

.pdf-lines::before,
.pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

.pdf-lines::before {
  top: 8px;
}

.pdf-lines::after {
  top: 16px;
}

.pdf-lines>span {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 3px;
  background: white;
  border-radius: 1px;
}

/* Word文件样式 */
.file-word {
  background: #2B579A;
}

.word-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

/* Excel文件样式 */
.file-excel {
  background: #217346;
}

.excel-icon {
  font-size: 32px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

/* 图片文件样式 */
.file-image {
  background: #FF6B35;
}

/* 默认文件样式 */
.file-default {
  background: #909399;
}

.default-icon {
  font-size: 24px;
  color: white;
  font-weight: bold;
  margin-bottom: 8px;
}

.file-text {
  color: white;
  font-size: 12px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name {
  font-size: 12px;
  color: #606266;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 100%;
}

/* 表单样式 */
.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #20B2AA;
  margin: 20px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 2px solid #20B2AA;
}

.file-list-item {
  margin: 5px 0;
}

.file-list-item .el-button--text {
  color: #409EFF;
  padding: 0;
  font-size: 14px;
}

/* 文件预览样式 */
.file-preview-content {
  padding: 20px;
  text-align: center;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.image-preview {
  text-align: center;
}

.file-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.file-icon-large {
  width: 120px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  position: relative;
  transition: transform 0.2s;
}

.file-icon-large:hover {
  transform: scale(1.05);
}

/* 大尺寸文件图标样式 */
.file-icon-large.file-pdf {
  background: #EF4A37;
}

.file-icon-large .pdf-lines {
  width: 72px;
  height: 54px;
  position: relative;
  margin-bottom: 12px;
}

.file-icon-large .pdf-lines::before,
.file-icon-large .pdf-lines::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large .pdf-lines::before {
  top: 12px;
}

.file-icon-large .pdf-lines::after {
  top: 24px;
}

.file-icon-large .pdf-lines>span {
  position: absolute;
  top: 36px;
  left: 0;
  right: 0;
  height: 4px;
  background: white;
  border-radius: 2px;
}

.file-icon-large.file-word {
  background: #2B579A;
}

.file-icon-large .word-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-excel {
  background: #217346;
}

.file-icon-large .excel-icon {
  font-size: 48px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large.file-image {
  background: #FF6B35;
}

.file-icon-large.file-default {
  background: #909399;
}

.file-icon-large .default-icon {
  font-size: 36px;
  color: white;
  font-weight: bold;
  margin-bottom: 12px;
}

.file-icon-large .file-text {
  color: white;
  font-size: 16px;
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.file-name-large {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
  text-align: center;
  line-height: 1.4;
  word-break: break-all;
  max-width: 400px;
}

.file-size {
  font-size: 14px;
  color: #909399;
  font-weight: normal;
}
</style>